<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/5.15.2/css/all.min.css" type="text/css"
        rel="stylesheet" />

</head>

<body>

    <h1>不兼容 ie ,  </h1> 
    <h1>    兼容 safari   </h1>


    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }

        button {
            cursor: pointer;
            padding: 5px;
        }

        a {
            text-decoration: none;
        }


        body {
            width: 100vw;
            height: 100vh;
        }

        .wrap {
            background: seashell;
            width: 50%;
            height: auto;
            display: flex;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: darkgrey 0px 0px 30px 5px;
        }

        .left {
            width: 100%;
            padding: 23px;
            line-height: 2;
        }

        .header {
            display: flex;
            position: relative;
        }

        .scroll-bar {
            /* width: 55px; */
            /*  用 js 动态设置 */
            border-bottom: 2px solid blue;
            position: absolute;
            bottom: 0;
            transition: 0.3s;
        }

        .work-exp {
            margin-left: 35px;
        }


        .name-follow-me {
            display: flex;
            justify-content: space-between;
        }

        .name {
            font-weight: bolder;
            font-size: xx-large;
        }

        .follow-me {
            border: none;
            background: lightgreen;
            padding: 0 23px;
            margin: 15px;
            border-radius: 8px;
        }

        .contact-me span {
            font-size: 33px;    
            color: blueviolet;
            margin-right: 20px;
        }

        .a-active {
            font-weight: bold;
        }

        /* 模拟隐藏  */
        section {
            height: 0;
            overflow: hidden;
        }
        .active-section {
            background: grey;
            transition: 0.5s;
            height: auto;
        }
    </style>
    <div class="wrap">
        <!-- 左边文字 -->
        <div class="left">
            <div class="header">
                <!-- 去掉 href="#"  防止网页鬼畜   -->
                <a  class="  a-active " data-rel="about-me-section">个人简介</a>
                <a  class="work-exp " data-rel="work-exp-section">工作经历aaaaaaaa</a>
                <span class="scroll-bar"></span>
            </div>
            <!-- 个人简历部分 -->
            <section class="about-me-section    active-section  ">
                <div class="name-follow-me">
                    <span class="name">jack-tom</span>
                    <button class="follow-me">follow me</button>
                </div>
                <div class="contact-me">
                    <span><i class="fab fa-weibo "></i></span>
                    <span><i class="fab fa-weibo "></i></span>
                </div>
            </section>

            <!--   工作经历 部分    -->
            <section class="work-exp-section   ">
                <div>
                    <span>java 工程师</span>
                    <div>
                        <p>2019.6 ~ 2020.12</p>
                        <p>上海腾讯有限公司</p>
                        <button>12312</button>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <script>
        function a_Click(target) {
            a_list.forEach(item => {
                item.classList.remove("a-active");    // 循环移除 a-active class  的类
                item.style = "";
            });
            target.classList.add("a-active");
    
            document.querySelector(".active-section").classList.remove("active-section");    // 每次点击都要 remove("active-section"); 
            
            // ${target.getAttribute("data-rel")} 是表达式, 获取到的是 about-me-section 
            // 相当于 document.querySelector('.about-me-section ');
            const newCurrentSection = document.querySelector(`.${target.getAttribute("data-rel")}`);
            newCurrentSection.classList.add("active-section");
            // newCurrentSection.classList.remove("not-active-section");
            
    
            let scroll_bar = document.querySelector(".scroll-bar");
            // 设置指示条为菜单项的宽度
            scroll_bar.style.width = `${target.offsetWidth}px`;
            // 设置指示条位置为菜单项的起始位置
            scroll_bar.style.left = `${target.offsetLeft}px`;
        }
    
        var a_list = document.querySelectorAll(".header a");
        a_list.forEach(item => {
            // 每个菜单项点击时调用事件处理函数
            item.addEventListener("click", e => a_Click(e.target));
            // 首次页面展示时，工作简介菜单是a-active的，先触发一次点击处理
            item.classList.contains("a-active") && a_Click(item);
        });
    </script>




<xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">   
        
        必知必会 

        默认把 section 代码的高度为 0 ,  并 hidden, 实现隐藏的效果
        section {
            height: 0;
            overflow: hidden;
        }
        
        每次点击都要 remove("active-section"); 
        document.querySelector(".active-section").classList.remove("active-section");

        再用 js 添加
        .active-section {
            background: grey;
            transition: 0.5s;
            height: auto;
        }
        实现展开
    </xmp>


</body>
</html>